<div class="panel-manage">
	<div class="navbar navbar-inverse">
		<div class="navbar-inner text-right">	    	
			<button id="btn-order" class="btn btn-primary">สั่งซื้อแพ็กเก็จ</button>		
		</div>
	</div>
	<div class="panel-space"></div>
	<ul class="nav nav-tabs" id="tab_package">
		<li class="active"><a href="#tab-1" data-toggle="tab">ข้อมูลแพ็กเก็จ</a></li>
		<li><a href="#tab-2" data-toggle="tab">ประวัติการสั่งซื้อ</a></li>		
	</ul> 
	<div class="tab-content">
		<div class="tab-pane active" id="tab-1">
			<div class="section">
				<div class="line-space">
					<div class="well well-small"><b>ระยะเวลา</b></div>
					<div class="row-fluid section">					
						<label class="control-label span4">แพ็กเก็จปัจจุบัน:</label>				
						<div class="span8">
							<div class="controls">
								<?php print $data['PAK_NAME']; ?>
							</div>
						</div>
					</div>
					<div class="row-fluid section">					
						<label class="control-label span4">วันที่เริ่ม:</label>				
						<div class="span8">
							<div class="controls">
								<?php print $data['CAF_E_S_DATE']; ?>
							</div>
						</div>
					</div>
					<div class="row-fluid section">					
						<label class="control-label span4">วันหมดอายุ:</label>				
						<div class="span8">
							<div class="controls">
								<?php print $data['CAF_E_E_DATE']; ?>
							</div>
						</div>
					</div>
					<div class="row-fluid section">					
						<label class="control-label span4">จำนวนวันที่เหลือ:</label>				
						<div class="span8">
							<div class="controls">
								<?php if ($data['DAY_REMAIN'] != 'INF'): ?>
									<?php print $data['DAY_REMAIN']; ?> วัน
								<?php else: ?>
									ไม่จำกัด
								<?php endif; ?>
							</div>
						</div>
					</div>
					<div class="alert alert-info" style="margin-top:10px;"><p><i class="icon-info-sign"></i>
						<small>ท่านสามารถสั่งซื้อแพ็กเก็จเพื่อเพิ่มจำนวนสินค้าและรูปภาพเพิ่มเติมได้ <a href="#" target="_blank" style="color:green;"><b>ที่นี้</b></a></small></p>
					</div>
				</div>
				<div class="line-space">
					<div class="well well-small"><b>จำนวนรูปคงเหลือ</b></div>
					<div class="row-fluid section">					
						<label class="control-label span4">จำนวนภาพแกลอรี่</label>				
						<div class="span8">
							<div class="controls">
								<?php if ($curr_gallery_count > $data['CAF_IMG_COUNT']): ?> 
									<span class="font-red"><?php print $curr_gallery_count; ?></span> / <?php print $data['CAF_IMG_COUNT'];?>
								<?php else: ?>
									<?php print $curr_gallery_count; ?> / <?php print $data['CAF_IMG_COUNT'];?>
								<?php endif; ?>
							</div>
						</div>
					</div>
					<div class="row-fluid section">					
						<label class="control-label span4">จำนวนสินค้า</label>				
						<div class="span8">
							<div class="controls">
								<?php if ($curr_product_count > $data['CAF_PDT_COUNT']): ?> 
									<span class="font-red"><?php print $curr_product_count; ?></span> / <?php print $data['CAF_PDT_COUNT']; ?>
								<?php else: ?>
									<?php print $curr_product_count; ?> / <?php print $data['CAF_PDT_COUNT']; ?>
								<?php endif; ?>
							</div>
						</div>
					</div>
					<div class="row-fluid section">					
						<label class="control-label span4">จำนวนภาพ Cover</label>				
						<div class="span8">
							<div class="controls">
								<?php if ($curr_cover_count > $data['CAF_COVER_COUNT']): ?> 
									<span class="font-red"><?php print $curr_cover_count; ?></span> / <?php print $data['CAF_COVER_COUNT']; ?>
								<?php else: ?>
									<?php print $curr_cover_count; ?> / <?php print $data['CAF_COVER_COUNT']; ?>
								<?php endif; ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-pane" id="tab-2">TEST</div>	
	</div>
</div>
<script type="text/javascript">	
	function create_product_modal(url_action, id){
		var html = '<div id="modal-order" class="modal hide fade">';
		html += '<div class="modal-header">';
		html += '	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
		html += '	<h3>สั่งซื้อแพ็กเก็จ</h3>';
		html += '</div>';
		html += '<div class="modal-body">';			
		html += '	<form id="frm-modal-order" class="form-horizontal" action="' + url_action + '" method="post" enctype="multipart/form-data">';
		html += '		<input type="hidden" id="cpid" value="' + id + '" />';
		html += '		<div class="control-group">';
		html += '			<label class="control-label">ชื่อร้าน</label>';
		html += '			<div class="controls"><?php print $cafe_title; ?>';		
		html += '			</div>';
		html += '		</div>';
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="odpk">แพ็กเก็จ</label>';
		html += '			<div class="controls">';
		html += '				<select id="odpk" name="odpk"></select>';
		html += '			</div>';
		html += '		</div>';
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="odday">จำนวนวัน</label>';
		html += '			<div class="controls">';
		html += '				<label class="radio">';
		html += '					<input type="radio" name="odday" value="30" checked>';
		html += '					30 วัน';
		html += '				</label>';
		html += '				<label class="radio">';
		html += '					<input type="radio" name="odday" value="60">';
		html += '					60 วัน';
		html += '				</label>';
		html += '				<label class="radio">';
		html += '					<input type="radio" name="odday" value="90">';
		html += '					90 วัน';
		html += '				</label>';
		html += '			</div>';
		html += '		</div>';
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="odpk">ราคา</label>';
		html += '			<div class="controls">';
		html += '				<span id="odp"></span> บาท';
		html += '			</div>';
		html += '		</div>';
		html += '	</form>';
		html += '</div>';	
		html += '<div class="modal-footer">';
		html += '	<div id="panel-message" class="text-left"></div>';
		html += '	<button class="btn" data-dismiss="modal" aria-hidden="true">ยกเลิก</button>';
		html += '	<button class="btn btn-primary" id="btn-save">บันทึก</button>';
		html += '</div>';	
		html += '</div>';
		$('body').append(html);
	
		$('#modal-order').modal('show');
		$('#modal-order').on('hide', function(){
			$(this).remove();
		});
		
		// load packages
		$.ajax({
			type	: 'POST',
			url		: '<?php print base_url() . $cafe_name . '/backend/package/ajax_get_package'; ?>',
			dataType :'json',
			async	:false,
			success	: function(output){
				for (var i=0; i<output.length; i++){					
					$('select#odpk').append('<option value="' + output[i].id + '">' + output[i].name + '</option>');				
				}
				$('select#odpk').val(<?php print $data['PAK_ID']; ?>);
			}
		});

		// bind dropdown package event
		$('select#odpk, input[name=odday]').change(function(){		
			$.post('<?php print base_url() . $cafe_name . '/backend/package/ajax_check_package'; ?>', { opk : $('select#odpk').val(), odday : $('input[name=odday]:checked').val() }, function(output){
				var html = null;					
				switch (output.result){
					case 1: case 0:
						html = '<div class="alert alert-success"><i class="icon-tag"></i> ' + output.message + '</div>';					
					break;
					case -1:
						html = '<div class="alert alert-warning"><i class="icon-warning-sign"></i> ' + output.message + '</div>';
						html += '<div class="alert alert-success"><i class="icon-tag"></i> ' + output.message_2 + '</div>';				
					break;
				}		
				$('#modal-order #odp').text(output.price + '.00');
				$('#modal-order #panel-message').html(html);				
			}, 'json');			
		}).trigger('change');
	
		// bind submit event
		$('#modal-order #btn-save').click(function(){
			$('#modal-order #frm-modal-order').ajaxSubmit({			
				success: function(output){
					output = JSON.parse(output);
					if (output.result)
						html = '<div class="alert alert-success">';						
					else 
						html = '<div class="alert alert-error">';				
					html += output.message + '</div>';					
					$('#modal-order #panel-message').html(html);
	
					$('#modal-order button').attr('disabled','disabled');
					setTimeout(function(){ window.location.reload(); }, 1000);				
				}
			});		
		});
	}

	$('#btn-order').click(function(){
		create_product_modal('<?php print base_url() . $cafe_name . '/backend/package/ajax_order'; ?>');
	});
</script>